<style lang="scss" scoped>

    $width:400px;
    $height:80px;

    .check-wrapper{
      width: $width;
      height: $height;
      display: block;
      clear: both;
      margin: 10px 0;
      position: relative;
    }

    .check-box{
      display: inline-block;
      width:30px;
      height: 30px;
      float: left;
      background-size: cover;
      vertical-align: middle;
      margin: 2px ;
      cursor: pointer;
    }

    .check-img{
      @extend .check-box;
      background-image: url("../../../assets/images/ok_disabled.png");

      &.is-checked{
        background-image: url("../../../assets/images/ok_active.png");
      }

    }

    .check-title{
      width:100%;
      height: 45px;
      line-height: 45px;
      font-size: 18px;
      font-family: '微软雅黑';
      color: #777;
    }

    .check-item{
      width:80px;
      height:35px;
      text-align: center;
      float: left;
    }

    .check-text{
      display: inline-block;
      height: 35px;
      vertical-align: middle;
      line-height: 35px;
      font-size: 16px;
      color: #777;
      font-family: '微软雅黑';
      float: left;
      width:30px;
      text-align: center;
    }

    .check-input{
      position: absolute;
      left:0;
      top:45px;
      cursor: pointer;
      width:110px;
      height: 30px;
      opacity: 0;
    }



    .check-forward{
      @extend  .check-input;
    }


</style>

<template>
  <div class="check-wrapper">
      <div class="check-title">{{lblText}}</div>
      <input type="checkbox" class="check-forward" :disabled="disabled"  @change="$emit('input', $event.target.checked)" :checked="value"/>
      <div class="check-item">
        <span class="check-img" :class="{'is-checked':value}"></span>
        <span class="check-text">是</span>
      </div>
      <div class="check-item">
        <!--<input type="checkbox" class="check-inverse"  @change="change" :checked="!checked"/>-->
        <span class="check-img" :class="{'is-checked':!value}"></span>
        <span class="check-text">否</span>
      </div>
  </div>
</template>

<script>
  export default {
      name:"Check",
      props: {
        value:{
          type:Boolean,
          required:true
        },
        lblText:{
          type:String,
          required:false,
          default:'暂无'
        },
        disabled: {
          type:Boolean,
          required:false
        }
      },
      data(){
        return{};
      },
      methods:{
        change(){

          this.value=!this.value;

        }
      }
  }
</script>
